<template>
  <div class="play-box">
    <div class="title">{{ renderData.playTypeName }}</div>
    <subGameVav :data="renderData.lotteryPlayTypeList" @selectPlayType="selectPlayType"></subGameVav>
    <div class="game-nav-underline"></div>
    <div class="play-odds">
      <div v-for="(numItem, index) in getNumOddsList" :key="index" class="row-item">
        <OddsBtn
          @selectOdds="selectNumber(numItem, renderData.lotteryPlayTypeList[currentPlayTypeIndex].playTypeName)"
          :data="{ number: numItem.playName, odds: numItem.maxOdds }"
          :class="{ selected: getSelectNumOddsList.includes(numItem) }"
        />
        <div class="animalNumber">
          <OddsBtnRound
            v-for="(item, idx) in getAnimalNumberList(numItem.playCode)"
            :itemStyle="handleRoundStyle(item, numItem.playCode).itemStyle"
            :numberStyle="handleRoundStyle(item, numItem.playCode).numberStyle"
            :oddsStyle="handleRoundStyle(item, numItem.playCode).oddsStyle"
            :data="{ number: item }"
            :key="idx"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// SUDO:  连肖投注格式不对
import OddsBtn from './odds-btn.vue'
import OddsBtnRound from './odds-btn-round.vue'
import subGameVav from './sub-game-nav.vue'
import mixin from '@/mixin/xglhc-mixin.js'
import { showToast } from 'vant'
import { $utils } from '@utils'
import { submitBetNow } from '@/api'
import { handleStyleFromDifferentColorNum } from '@/config/markSixConfig.js'
import { animalList } from '@/config/markSixAnimal.js'

let config = { maxLength: 3, cacheKey: 'xglhc-lx-game' }
export default {
  name: 'xglhc-lx-game',
  components: {
    OddsBtn,
    subGameVav,
    OddsBtnRound,
  },
  mixins: [mixin],
  props: {
    renderData: {},
  },

  computed: {
    // 获取游戏选择最大长度
    getMaxLength() {
      return this.currentPlayTypeIndex
    },

    // // 有子玩法
    // hasSonPlay() {
    //   return !this.renderData.cachePlayList;
    // },
  },
  methods: {
    // 选择赔率
    selectNumber(item, preName) {
      // 之前选中的数据
      let list = this.getSelectNumOddsList
      item.betAmount = this.investStore.getSingleInvestMoney
      item['spliceName'] = `${preName}#${item.playName}`
      // 单选的情况
      if (config.maxLength === 1) {
        list = []
        list.push(item)
        this.notifyParentInvestList(list)
        return
      }
      // 多选的情况
      let findItem = list.map((item) => item.playCode).indexOf(item.playCode)
      if (findItem === -1) {
        if (this.getMaxLength < list.length) {
          showToast('超过最大选择数量')
          return
        }
        list.push(item)
        this.notifyParentInvestList(list)
      } else {
        list.splice(findItem, 1)
        this.notifyParentInvestList(list)
      }
    },

    // 重复投注， 填充最后一期投注号码
    fillLastNumber() {
      let list = this.investStore.lastInvestList //最后一次记录
      // 连码的提交格式，要成数组
      const betContent = list[0].betContent.split(' ')
      if (betContent.length > 1) {
        list = betContent.map((number) => {
          let obj = JSON.parse(JSON.stringify(list[0]))
          obj.playCode = number
          obj.playName = obj.playTypeCode
          delete obj.betContent
          return obj
        })
      }
      if (this.hasSonPlay) {
        this.selectNumberList[this.currentPlayTypeIndex] = list
        // this.$set(this.selectNumberList, this.currentPlayTypeIndex, list)
      } else {
        this.selectNumberList = list
      }
      this.investStore.setInputMoney(list[0].betAmount)
      this.notifyParentInvestList(list)
    },

    // 立即下注, 目前暂时有两种格式，
    async betNow() {
      if (!this.investStore.getInvestBtnText.canBat) {
        this.fillLastNumber()
        return
      }
      if (!$utils.verifyBetAmount(this.getSelectNumOddsList)) return

      let params = {
        lotteryCode: this.renderData.lotteryCode, //彩种类型，如六合彩LHC
        orderDetails: [],
      }

      const capCode = this.gameStore.currentHandicapCode
      if (capCode) params.handicapCode = capCode

      let betContent = ''
      this.getSelectNumOddsList.forEach((numItem) => {
        betContent += numItem.playCode + ' '
        params.orderDetails.push({
          lotteryCode: this.renderData.lotteryCode, // 彩种类型，如六合彩LHC
          playTypeCode: this.renderData.playTypeCode, // 彩种CODE，
          sonPlayTypeCode: numItem.sonPlayTypeCode, // 选中号码 的item信息
          playCode: numItem.playCode, // 选中号码 的item信息
          betContent: numItem.playCode, // 注单内容，与playCode保持一致
          betAmount: numItem.betAmount, // 单注金额
        })
      })
      params.orderDetails[0].betContent = betContent.trim()
      await submitBetNow({ lotteryCode: params.lotteryCode, orderDetails: [params.orderDetails[0]], handicapCode: params.handicapCode })
      // if (res.code != 200) {
      //   return
      // }
      this.investStore.setLastInvestList(params.orderDetails)
      this.initConfig()
      showToast('下注成功')
    },

    getAnimalNumberList(playCode) {
      return animalList.find((item) => item.playCode === playCode)?.nums
    },

    // 根据赔率号码类型 处理不同的样式
    handleRoundStyle(number, playCode) {
      const animalCode = Array.from(this.getSelectNumOddsList, ({ playCode }) => playCode)
      let styleStore = handleStyleFromDifferentColorNum(number)
      if (animalCode.includes(playCode)) {
        return styleStore.active
      } else {
        return styleStore.normal
      }
    },
  },
}
</script>

<style scoped lang="less">
@import url('./common.less');
.play-odds {
  .row-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    box-sizing: border-box;
    .animalNumber {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      padding-left: 3px;
      box-sizing: border-box;

      .odds-item {
        width: 35px;
        height: 35px;
        margin-top: 0;
      }
    }
  }
}
</style>
